<template>
  <div class="search p-3">
    <input type="text" class="searchinp pl-3 mb-3"  placeholder="请输入您要搜索的条件">
    <div class="by d-flex jc-between mb-5">
       <button class="namebtn" @click="seabyname()">根据考试名称搜索</button>
    <button class="probtn" @click="seabypeo()">根据出题人搜索</button>
    </div>

      <div class="search-show"  v-if="searchResult.length > 0">
        <router-link  tag="div" :to="{path: `/test/${item._id}`,
         query:{pic: item.pic ,icon: item.icon, title: item.title, name: item.name, instructions: item.instructions}}"
          class="main-item mb-3" v-for="(item,i) in searchResult" :key="i">
          <div class="main-list p-2 d-flex ">
         <div class="icon mr-2"><img :src="item.icon" alt=""></div>
         <div class="content p-2">
           <div class="title fs-20 mb-3">{{item.title}}</div>
           <div class="tip text-grey-1 mb-2">{{item.instructions | filtersText}}</div>
           <div class="bywho">{{item.name}}</div>
         </div>
          </div>
        </router-link>
      </div>
     <div class="search-show"  v-else>
       <div class="tips">好像没找到哎，看看其他的叭</div>
        <router-link  tag="div" :to="{path: `/test/${item._id}`,
         query:{pic: item.pic ,icon: item.icon, title: item.title, name: item.name, instructions: item.instructions}}"
          class="main-item mb-3" v-for="(item,i) in all" :key="i">
          <div class="main-list p-2 d-flex ">
         <div class="icon mr-2"><img :src="item.icon" alt=""></div>
         <div class="content p-2">
           <div class="title fs-20 mb-3">{{item.title}}</div>
           <div class="tip text-grey-1 mb-2">{{item.instructions | filtersText}}</div>
           <div class="bywho">{{item.name}}</div>
         </div>
          </div>
        </router-link>
      </div>


   </div>
  


  
</template>

<script>
export default {
  data() {
    return {
      searchResult:[],
      all:[]
    }
  },
   filters: {
    filtersText(val) {
      // 要判断一下,如果是空就返回空字符串,不然会报错
      if (val != null && val != "") {
        var reg = /[\u4e00-\u9fa5]/g;
        var names = val.match(reg);
        val = names.join("");
        return val.substr(0, 10); //获取富文本文字内容的前50个字符
      } else return "";
    },
    data(val) {
    return dayjs(val).format("20YY-MM-DD")
  }
  },
methods: {
 
  seabyname() {
    var namebtn = document.querySelector('.namebtn')
      var searchinp = document.querySelector('.searchinp') 
      const inpval = searchinp.value
    this.searchResult = this.all.filter((item) => {
    if (String(item.title).indexOf(inpval) !== -1) {
     return item
    }
    })
  },
  seabypeo() {
    var probtn = document.querySelector('.probtn')
      var searchinp = document.querySelector('.searchinp') 
      const inpval = searchinp.value
    this.searchResult = this.all.filter((item) => {
    if (String(item.name).indexOf(inpval) !== -1) {
     return item
    }
    })
  },
   click() {
this.seabyname() ||  this.seabypeo()
  },
  async allfetch() {
    const res = await this.$http.get('/subject')
    this.all = res.data
  }
},
created() {
  this.allfetch()
},
}
</script>

<style>

</style>